<template>
  <div class="search-select-container">
    <input
      type="text"
      v-model="searchQuery"
      @focus="showOptions = true"
      @blur="handleBlur"
      @input="handleSearch"
      placeholder="搜索用户..."
      class="search-input"
    />
    <div v-if="showOptions" class="options-container">
      <div v-if="filteredOptions.length > 0" class="options-list">
        <div
          v-for="option in filteredOptions"
          :key="option.id"
          @click="selectOption(option)"
          class="option-item"
          :class="{ selected: isSelected(option) }"
        >
          {{ option.name || option.username }}
        </div>
      </div>
      <div v-else class="no-results">
        未找到匹配的用户
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSelect',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  emits: ['update:model-value'],
  data() {
    return {
      searchQuery: '',
      showOptions: false,
      selectedOption: null
    };
  },
  computed: {
    filteredOptions() {
      if (!this.searchQuery) {
        return this.options;
      }
      return this.options.filter(option => {
        const searchValue = this.searchQuery.toLowerCase();
        return (
          (option.name && option.name.toLowerCase().includes(searchValue)) ||
          (option.username && option.username.toLowerCase().includes(searchValue))
        );
      });
    }
  },
  watch: {
    modelValue(newValue) {
      // 当外部值变化时，更新搜索框显示
      if (newValue) {
        const selected = this.options.find(option => option.id === newValue);
        if (selected) {
          this.searchQuery = selected.name || selected.username || '';
          this.selectedOption = selected;
        }
      }
    },
    options(newOptions) {
      // 当选项列表变化时，更新选中状态
      if (this.modelValue) {
        const selected = newOptions.find(option => option.id === this.modelValue);
        if (selected) {
          this.searchQuery = selected.name || selected.username || '';
          this.selectedOption = selected;
        }
      }
    }
  },
  methods: {
    handleSearch() {
      this.showOptions = true;
    },
    handleBlur() {
      // 延迟隐藏，以便点击选项时能正常触发
      setTimeout(() => {
        this.showOptions = false;
      }, 200);
    },
    selectOption(option) {
      this.selectedOption = option;
      this.searchQuery = option.name || option.username || '';
      this.$emit('update:model-value', option.id);
      this.showOptions = false;
    },
    isSelected(option) {
      return option.id === this.modelValue;
    }
  }
};
</script>

<style scoped>
.search-select-container {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
}

.search-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.options-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.options-list {
  padding: 4px 0;
}

.option-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.option-item:hover {
  background-color: #f0f0f0;
}

.option-item.selected {
  background-color: #e6f7ff;
  color: #1890ff;
}

.no-results {
  padding: 16px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>